<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>会员注册</title>
  <link rel="stylesheet" href="欢迎注册会员.css" />
</head>

<body>

  <div class="container">
    <h1>欢迎注册会员</h1>

    <form action="data.html" method="get">
      <!-- 手机号码 -->
      <div class="form-row">
        <label for="telephone">手机号码：</label>
        <input type="text" placeholder="请输入11位手机号" name="telephone" id="telephone" required title="请输入11位手机号" /> <span class="tips">必填</span> 
      </div>

      <!-- 创建密码 -->
      <div class="form-row">
        <label for="password">创建密码：</label>
        <input type="password" placeholder="请输入8位密码" name="password" id="password" required title="请输入8位密码" /> <span class="tips">必填</span>
      </div>

      <!-- 注册邮箱 -->
      <div class="form-row">
        <label for="email">注册邮箱：</label>
        <input type="email" placeholder="例如：wustzz@sina.com" name="email" id="email" required title="请输入邮箱地址" /> <span class="tips">必填</span>
      </div>

      <!-- 验证码 -->
      <div class="form-row">
        <label for="verificationCode">验证码：</label>
        <input type="text" placeholder="请输入验证码" name="verificationCode" id="verificationCode" title="请输入验证码" />
        <span id="codeBox" title="点击刷新验证码"></span>
        <button type="button" id="refreshCode" title="刷新验证码">刷新</button>
      </div>

      <!-- 性别 -->
      <div class="form-row">
        <label for="male">性别：</label>
        <input type="radio" name="sex" id="male" value="男" checked title="男" />男&nbsp;&nbsp;
        <input type="radio" name="sex" id="female" value="女" title="女" />女
      </div>

      <!-- 生日 -->
      <div class="form-row">
        <label for="birthday">生日：</label>
        <input type="text" name="birthday" id="birthday" placeholder="年/月/日" title="请输入生日" />
      </div>

      <!-- 年龄 -->
      <div class="form-row">
        <label for="age">年龄：</label>
        <input type="text" name="age" id="age" placeholder="请输入年龄" title="请输入年龄" />
      </div>

      <!-- 籍贯 -->
      <div class="form-row">
        <label for="province">籍贯：</label>
        <select name="province" id="province" title="请选择省份">
          <option value="湖北省">湖北省</option>
          <option value="湖南省">湖南省</option>
          <option value="广东省">广东省</option>
        </select>
        <select name="city" id="city" title="请选择城市">
          <option value="武汉市">武汉市</option>
          <option value="长沙市">长沙市</option>
          <option value="广州市">广州市</option>
        </select>
      </div>

      <!-- 个人学历 -->
      <div class="form-row">
        <label for="educate">个人学历：</label>
        <select name="educate" id="educate" title="请选择学历">
          <option value="本科" selected>本科</option>
          <option value="研究生">硕士研究生</option>
          <option value="博士">博士生</option>
        </select>
      </div>

      <!-- 月薪 -->
      <div class="form-row">
        <label for="salary">月薪：</label>
        <input type="range" name="salary" id="salary" min="0" max="5000" title="请选择月薪" />
        <span id="rangeValue">2500</span>
      </div>

      <!-- 个人爱好 -->
      <div class="form-row">
        <label for="hobbies">个人爱好：</label>
        <input type="checkbox" name="hobbies" id="hobby1" value="旅游" checked title="旅游" />旅游
        <input type="checkbox" name="hobbies" id="hobby2" value="美食" title="美食" />美食
        <input type="checkbox" name="hobbies" id="hobby3" value="电影" title="电影" />电影
        <input type="checkbox" name="hobbies" id="hobby4" value="运动" title="运动" />运动
      </div>

      <!-- 个人照片 -->
      <div class="form-row">
        <label for="photo">个人照片：</label>
        <input type="file" name="photo" id="photo" accept="image/*" title="上传个人照片" />
      </div>
        <div id="photoPreviewBox" ></div>

      <!-- 个人简历 -->
      <div class="form-row">
        <label for="resume">个人简历：</label>
        <textarea name="resume" id="resume" cols="30" rows="10" placeholder="自我介绍" title="请输入个人简历"></textarea>
      </div>

      <!-- 提交重置 -->
      <div class="form-row">
        <input type="submit" value="提交" title="提交表单" />
        <input type="reset" value="重置" title="重置表单" />
      </div>
    </form>
  </div>
</body>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    // 月薪滑块显示
    const range = document.getElementById("salary");
    const rangeValue = document.getElementById("rangeValue");
    range.value = 2500;
    rangeValue.textContent = range.value;
    range.addEventListener("input", function () {
      rangeValue.textContent = range.value;
    });

    // 图片上传预览
    const photoInput = document.getElementById('photo');
    const photoPreviewBox = document.getElementById('photoPreviewBox');
    photoInput.addEventListener('change', function () {
      photoPreviewBox.innerHTML = '';
      const file = this.files[0];
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.maxWidth = '180px';
          img.style.maxHeight = '180px';
          img.style.border = '1px solid #ccc';
          img.style.margin="8px auto";
          photoPreviewBox.appendChild(img);
        };
        reader.readAsDataURL(file);
      }
    });

    // 验证码功能
    function randomCode(len = 4) {
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
      let code = '';
      for (let i = 0; i < len; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return code;
    }

    const codeBox = document.getElementById('codeBox');
    const refreshBtn = document.getElementById('refreshCode');
    let currentCode = '';

    function setCode() {
      currentCode = randomCode();
      codeBox.textContent = currentCode;
    }

    setCode();
    codeBox.onclick = setCode;
    refreshBtn.onclick = setCode;

    // 表单校验验证码
    document.querySelector('form').addEventListener('submit', function (e) {
      const inputCode = document.getElementById('verificationCode').value.trim();
      if (inputCode.toLowerCase() !== currentCode.toLowerCase()) {
        alert('验证码输入错误，请重新输入！');
        setCode();
        document.getElementById('verificationCode').focus();
        e.preventDefault();
      }
    });
  });
</script>

</html>